<template lang="pug">
div
  obj-single-select(
    :options="lenses",
    key="id",
    label="name",
    :placeholder="placeholder",
    :update="update",
    :selected.sync="selected",
    type="selected",
    @click="click",
    :loading="loading",
    :searchable="true",
  )
</template>

<script>
import { getLenses } from '../../vuex/action'
import ObjSingleSelect from './objSingle'

export default {
  name: 'lenseSelect',
  components: {
    ObjSingleSelect
  },
  vuex: {
    getters: {
      lenses: ({ lense }) => lense.lenses,
    },
    actions: {
      getLenses,
    }
  },
  props: ['orderItem'],
  data () {
    return {
      loading: false,
    }
  },
  methods: {
    click (e) {
      if (e.target.parentElement.classList.toString() === 'multiselect__tags') {
        this.load()
      }
    },
    load () {
      catchError(async () => {
        this.loading = true
        await this.getLenses()
        this.loading = false
      })
    },
    update({id: lens_id, name: lens_name, price: lens_price}) {
      _.assign(this.orderItem, {
        lens_id,
        lens_name,
        lens_price: Number(lens_price),
      })
    }
  },
  created () {
    this.load()
  },
  computed: {
    placeholder () {
      const result = _.find(this.lenses, ['id', this.orderItem.lens_id])
      return result ? result.name : result
    },
    selected () {
      return _(this.orderItem)
      .mapKeys((v, k)=>k.replace('lens_', ''))
      .value()
    },
  },
  watch: {

  }
}
</script>

<style lang="sass" scoped>
</style>
